<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		#box1 input {
			background:lightskyblue;
			border: none;
			padding: 5px 10px;
		}
		#box1 .active {
			background:fuchsia;
		}
		#box1 div {
			margin-top: 10px;
			width:200px; 
		    height:200px; 
		    background:skyblue; 
		    display:none;
	    }
	</style>
</head>
<body>
	<script type="text/javascript">
		//构造函数模式 ,小明 今年18岁 性别男 有男朋友 男朋友会说话 说什么自己定
		var huas;
		function xiaoming(){
			this.name="小明";
			this.age=18;
			this.gender="男";
			this.ifHave=["有","没有"];
			this.hua=function(huas){
				var huas="大家好啊！";
				return huas;
			}
		}
		var newXiaoMing=new xiaoming();
		document.write(newXiaoMing.name+",今年"+newXiaoMing.age+"岁,性别"+newXiaoMing.gender+","+newXiaoMing.ifHave[0]+"男朋友"+",他说"+newXiaoMing.hua(huas)+"</br>");
		
		
		//工厂模式 ,造一辆车 出厂 （合格证/建议零售价/说明书）
		function cche(zheng,jia,shu){
			var che=new Object();
			che.certificate=zheng;
			che.price=jia;
			che.instructions=shu;
			return che;
		}
		var chuchang=cche("合格","￥8888","该如何用");
		document.write("合格证："+chuchang.certificate+"，建议零售价："+chuchang.price+"，说明书："+chuchang.instructions+"</br>")
		
		
		//用面向对象写一个选项卡
		window.onload=function(){
	    	var oTab=new TabSwitch("box1");
		}
		function TabSwitch(id){
		    var box=document.getElementById(id);
		    this.btn=box.getElementsByTagName('input');
		    this.kuang=box.getElementsByTagName('div');
		    var i=0;
		    var _this=this; 
		    for(i=0;i<this.btn.length;i++){
		        this.btn[i].index=i;
		        this.btn[i].onclick=function(){
		            _this.yong(this);  
		        };
		    };
		};
		TabSwitch.prototype.yong=function(oBtn){
		    for(i=0;i<this.btn.length;i++){
		        this.btn[i].className='';
		        this.kuang[i].style.display='none';
		    }
		    oBtn.className='active';  
		    this.kuang[oBtn.index].style.display='block';
		}
		
	</script>
	
	<div id="box1">
	    <input class="active" type="button" value="11" />
	    <input type="button" value="22" />
	    <input type="button" value="33" />
	    <div style="display:block;">11111111111</div>
	    <div>222222222</div>
	    <div>3333333</div>
	</div>
	
</body>
</html>